<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 3D转换</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        font-family: '微软雅黑';
        background-color: #F7F7F7;
    }
    
    .text-box {
        margin-top: 100px;
        text-align: center;
        line-height: 1;
        font-size: 100px;
        /*color: #065DAC;*/
    }
    
    .text-box span {
        display: inline-block;
        position: relative;
    }
    
    .text-box span::before,
    .text-box span::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        transition: all 1s;
        transform-origin: left center ;
    }
    
    .text-box span::before {
        z-index: 3;
        color: #FFF;
        transform: rotateY(-15deg);
    }
    
    .text-box span::after {
        z-index: 2;
        color: rgba(0, 0, 0, 0.3);
    }
    
    .text-box:hover span::before {
        transform: rotateY(-40deg) skew(0deg, 5deg);
    }
    
    .text-box:hover span::after {
        transform: skew(0deg, 20deg);
    }
    </style>
</head>

<body>
    <div class="text-box">
        <span data-text="传">传</span>
        <span data-text="智">智</span>
        <span data-text="播">播</span>
        <span data-text="客">客</span>
    </div>
</body>

</html>
